<!-- <template>
  <div id="cesiumContainer"></div>
</template> -->
<!--  创建路径并绕路径飞行，且能改变视角，改变路径插值方法 -->
<template>
  <div id="customContainer">
    <div id="buttonContainer">
      <button id="downViewButton">俯视视图</button>
      <button id="trackViewButton">实体视图</button>
      <button id="sideViewButton">侧面视图</button>
    </div>
    <div id="selectContainer">
      <select id="select">
        <option value="LinearApproximation">线性近似插值路径</option>
        <option value="HermitePolynomialApproximation">Hermite 多项式近似插值</option>
        <option value="LagrangePolynomialApproximation">拉格朗日多项式近似插值路径</option>
      </select>
    </div>
  </div>
  <div id="cesiumContainer" style="width: 100%"></div>
</template>

<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue';

onMounted(() => {
   Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZmJjNWE1MS1iNTQyLTRhMTYtODAyMS05Y2M3NmRkYzA2YjAiLCJpZCI6MzE3NjQ5LCJpYXQiOjE3NTE0MjU0MTl9.-YkjvNog5MTxns8gGCBe3ybvx5ixknkzu_Cczfv4VV8';
 
  const viewer = new Cesium.Viewer('cesiumContainer',{
    infoBox:false,    
  })

  const startTime = Cesium.JulianDate.fromDate(new Date(2024, 5, 20, 17));
  const stopTime = Cesium.JulianDate.addSeconds(startTime, 360, new Cesium.JulianDate());
  viewer.clock.startTime = startTime.clone();
  viewer.clock.stopTime = stopTime.clone();
  viewer.clock.multiplier = 20; //将时间流逝速度设为正常的 20 倍
   
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
  //将视图设置为提供的时间
  viewer.timeline.zoomTo(startTime, stopTime);

   //点位数组
  const dataPoint = [
    { longitude: -122.567, latitude: 37.843, height: 200 },
    { longitude: -122.537, latitude: 37.817, height: 500 },
    { longitude: -122.519, latitude: 37.811, height: 800 },
    { longitude: -122.475, latitude: 37.822, height: 500 },
    { longitude: -122.464, latitude: 37.854, height: 300 },
    { longitude: -122.438, latitude: 37.874, height: 500 },
  ];
  let positionProperty = new Cesium.SampledPositionProperty();//Cesium.SampledPositionProperty： Cesium 中用于管理和插值实体位置的类。它允许你在一系列时间点上指定位置，并根据这些位置在其他时间点上进行插值。适用于需要动态调整位置的实体，如动画、轨迹等。
 for (let i = 0; i < dataPoint.length; i++) {
    const time = Cesium.JulianDate.addSeconds(startTime, i * 72, new Cesium.JulianDate());
    const position = Cesium.Cartesian3.fromDegrees(dataPoint[i].longitude, dataPoint[i].latitude, dataPoint[i].height);
    positionProperty.addSample(time, position);

    // 绘制点
    viewer.entities.add({
      position: position,
      point: {
        color: Cesium.Color.TRANSPARENT,
        pixelSize: 8,
        outlineColor: Cesium.Color.ORANGE,
        outlineWidth: 3,
      },
    });
  }
     let entity = viewer.entities.add({
    id: "408",
    name: "王牌战斗机",
    //availability 属性用于控制实体在时间上的可见性或有效性。它允许你指定实体在特定时间段内才可见或活动
    //如果不设置 availability 属性，实体将默认在整个时间范围内可见
    availability: new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({
        start: startTime,
        stop: stopTime,
      }),
    ]),
    //Cesium.VelocityOrientationProperty 是 Cesium 中的一个类，用于根据实体的速度自动计算和更新其朝向。它基于实体的运动方向来确定朝向，使得实体能够在移动时保持正确的朝向
    orientation: new Cesium.VelocityOrientationProperty(positionProperty),
    position: positionProperty,
    model: {
      scale: 10,
      uri: "../public/models/Cesium_Air.glb",
      minimumPixelSize: 64,
    },
    path: {
      resolution: 1,
      width: 15,
      material: new Cesium.PolylineGlowMaterialProperty({
        //一个数字属性，指定光晕的强度，以总线宽度的百分比表示
        glowPower: 0.1,
        color: Cesium.Color.ORANGE,
        //一个数字属性，指定渐缩效果的强度，以总线长的百分比表示。如果为 1.0 或更高，则不使用渐缩效果
        //taperPower:0.5
      }),
    },
  });
    // viewer.zoomTo(viewer.positionProperty);

    //添加自定义按钮（相机视角切换）
  let downViewButton = document.getElementById("downViewButton");
  let trackViewButton = document.getElementById("trackViewButton");
  let sideViewButton = document.getElementById("sideViewButton");

  downViewButton?.addEventListener("click", function () {
    viewer.zoomTo(viewer.entities, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90)));
  });
  trackViewButton?.addEventListener("click", function () {
    viewer.trackedEntity = entity;
  });
  sideViewButton?.addEventListener("click", function () {
    viewer.zoomTo(entity, new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0), Cesium.Math.toRadians(-30), 4000));
  });

  //添加自定义选项菜单（路径效果处理）
  //document.getElementById('select') 获取到的是一个 HTMLElement 类型
  //因为 HTMLElement 类型没有 value 属性，所以需要将其类型断言为 HTMLSelectElement 类型
   let selectItem = document.getElementById("select");
  selectItem?.addEventListener("change", function () {
    console.log("addEventListener");
    switch (this.value) {
      case "LinearApproximation":
        //设置插值选项
        //线性插值进行平滑过渡
        //positionProperty是前面创建的一个 SampledPositionProperty 对象
        positionProperty.setInterpolationOptions({
          interpolationDegree: 1, //指定了插值的多项式度数，这里使用的是线性插值（度数为 1）
          interpolationAlgorithm: Cesium.LinearApproximation, //选择了线性插值算法，这是一种简单的插值方法，适用于在位置数据之间进行线性过渡
        });
        //将 sampledPositionProperty 赋值给 entity 的 position 属性
        entity.position = positionProperty;
        break;
      case "HermitePolynomialApproximation":
        //二次赫尔米特多项式进行插值实现相对平滑且连续的过度效果
        positionProperty.setInterpolationOptions({
          //二次多项式进行插值。二次多项式插值相较于线性插值会更光滑，但不如高阶多项式平滑
          interpolationDegree: 2, 
          //赫尔米特多项式插值算法。使得插值曲线能够平滑过渡，并且可以更好地控制运动的速度和方向变化
          interpolationAlgorithm: Cesium.HermitePolynomialApproximation, 
        });
        entity.position = positionProperty;
        break;
      case "LagrangePolynomialApproximation":
        //五次拉格朗日多项式进行插值实现更加平滑的过渡效果
        positionProperty.setInterpolationOptions({
          //插值的多项式度数为 5。多项式度数决定了插值的复杂程度和光滑程度。度数为 5 表示使用五次多项式进行插值，这通常会使插值结果更加平滑
          interpolationDegree: 5, 
          //拉格朗日多项式插值算法。拉格朗日多项式插值算法适用于需要高精度的光滑插值场景
          interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
        });
        entity.position = positionProperty;
        break;
      default:
        break;
    }
  })

})

</script>